

<div *ngIf='submitted' >
    <div class='row'>
        <div class='result-text col-sm-6 my-2' style="font-weight:bold">Result for {{keyWord}}</div>
        
        <div class='pagination-mine col-sm-6'>
            <pagination-template #p="paginationApi" [id]="config.id" (pageChange)="config.currentPage = $event">
                <div class="custom-pagination">
                    <div class="pagination-previous" [class.disabled]="!p.isFirstPage()">
                        <span *ngIf="p.isFirstPage()" style="color:#cacaca">
                            << Previous&nbsp;</span> </div> 
                  <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
                    <span *ngIf="!p.isFirstPage()" (click)="p.previous()">
                      << Previous&nbsp;</span> 
                    </div> 
                    <div class="page-number" *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
                          <span (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">{{ page.label }}</span>
                        <div *ngIf="p.getCurrent() === page.value">
                          <span>{{ page.label }}</span>
                        </div>
                    </div>
    
                    <div class="pagination-next" [class.disabled]="!p.isLastPage()">
                        <span *ngIf="p.isLastPage()" style="color:#cacaca">&nbsp;Next >></span>
                      </div>
                    <div class="pagination-next" [class.disabled]="p.isLastPage()">
                      <span *ngIf="!p.isLastPage()" (click)="p.next()">&nbsp;Next >></span>
                    </div>
                </div>  
              </pagination-template>
        </div>
     
        </div>      
        
    <div *ngFor="let card of cards  | paginate: config">
        <div class='row'>
            <div class='col-sm-12'>
                <app-card [item]=card></app-card>
            </div>
            
        </div>

    </div>
</div >

